<!--
  功能：
  作者：jiraiya_chen
  时间：2024年01月15日 16:08:58
  修改人员：jiraiya_chen
-->
<template>
  <div>
    <MyTabs>
      <template #1>
        <el-form-item label="ID">
          <el-tooltip
            class="item"
            effect="dark"
            content="请注意,ID的修改可能会导致该组件相关事件失效！"
            placement="left"
          >
            <el-input v-model="props.id" class="input" />
          </el-tooltip>
        </el-form-item>
        <AssociatedFieldKey :props="props" />
        <el-form-item label="标题">
          <el-input v-model="props.label" />
        </el-form-item>
        <el-form-item label="公式函数">
          <!-- 从弹框里获取这三个值 
            "fnText": "AVERAGE()",
            "fnArr": [],
            "$fn": "AVERAGE()", -->
          <fn-Text
            v-model="props.fnText"
            :label="props.label"
            :def-value="props.fnText"
            @change="handlerChangeFn"
          />
        </el-form-item>
      </template>
      <template #2>
        <el-form-item label="栅格">
          <el-input-number v-model="props.span" :min="1" :max="24" />
        </el-form-item>
        <el-form-item label="栅格间隔">
          <el-input-number v-model="props.gutter" :min="0" />
        </el-form-item>
        <el-form-item label="标签宽度">
          <el-input-number v-model="props.labelWidth" :min="1" :max="200" />
        </el-form-item>
        <el-form-item label="大小">
          <el-input-number v-model="props.size" :min="10" :max="50" />
        </el-form-item>
        <el-form-item label="加粗">
          <el-input-number
            v-model="props.bold"
            :min="100"
            :max="800"
            :step="100"
          />
        </el-form-item>
      </template>
      <template #3>
        <el-form-item label="显示标签">
          <el-switch v-model="props.showLabel" />
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="props.color" />
        </el-form-item>
        <el-form-item label="布局">
          <el-radio-group v-model="props.align">
            <el-radio-button label="left">左</el-radio-button>
            <el-radio-button label="center">中</el-radio-button>
            <el-radio-button label="right">右</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </template>
    </MyTabs>
  </div>
</template>

<script>
import MyTabs from "../../component/tabs";
import AssociatedFieldKey from "../../component/associatedFieldKey";
import FnText from "../../component/fnText";

export default {
  name: "value-text",
  props: ["props", "getFormId"],

  components: { MyTabs, AssociatedFieldKey, FnText },
  data() {
    return {};
  },
  methods: {
    handlerChangeFn(fnArr, $fn) {
      this.props.fnArr = fnArr;
      this.props.$fn = $fn;
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
  beforeDestroy() {},
};
</script>

<style scoped lang="scss"></style>
